<template>
    <div class="app-container">
        <a-row :gutter="10">
            <a-col :span="select ? 10 : 24">
                <a-card>
                    <Team @select="onTeamSelect" />
                </a-card>
            </a-col>
            <a-col v-show="!!select" :span="14">
                <a-card>
                    <User ref="userRef" />
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script setup name="TeamModule">
import { ref, reactive, toRaw, computed, nextTick } from 'vue'
import Team from './Team/index.vue'
import User from './User/index.vue'

const userRef = ref()
const team = reactive({
    selectKeys: []
})

const select = computed(() => {
    return team.selectKeys && team.selectKeys.length > 0
})

const onTeamSelect = selectKeys => {
    team.selectKeys = selectKeys
    const ids = toRaw(selectKeys.value)
    if (ids && ids.length > 0) {
        nextTick(() => {
            userRef.value.queryTeamUser(ids[0])
        })
    }
}
</script>
